<template>  
    <div class="teacher-search">  
        <div class="search-bar">  
            <input v-model="searchQuery" placeholder="输入学生姓名" />  
            <button @click="searchCourses">查询</button>  
        </div>  
        <div v-if="showTable">  
            <table>  
                <thead>  
                    <tr>  
                        <th>学科名称</th>  
                        <th>任课教师</th>  
                        <th>学生姓名</th>  
                        <th>课程编号</th>  
                        <th>成绩</th>  
                        <th>修改成绩</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <tr v-for="course in filteredCourses" :key="course.id">  
                        <td>{{ course.subject }}</td>  
                        <td>{{ course.teacherName }}</td>  
                        <td>{{ course.studentName }}</td>  
                        <td>{{ course.no }}</td>  
                        <td>{{ course.score }}</td>  
                        <td>  
                            <button @click="increaseScore(course)">+</button>  
                            <span>{{ course.score }}</span>  
                            <button @click="decreaseScore(course)">-</button>  
                        </td>  
                    </tr>  
                </tbody>  
            </table>  
        </div>  
        <p v-else>请输入学生姓名并点击查询按钮以查看课程并修改成绩。</p>  
    </div>  
</template>  
  
<script>  
export default {  
    data() {  
        return {  
            searchQuery: '',  
            allCourses: [  
                { id: 1, subject: '数学', teacherName: '张老师', studentName: '几木', no: '101', score: '89' },  
                { id: 2, subject: '数学', teacherName: '张老师', studentName: '张张', no: '101', score: '84' },  
                { id: 3, subject: '数学', teacherName: '韩老师', studentName: '朱朱', no: '101', score: '85' },  
                { id: 4, subject: '数学', teacherName: '王老师', studentName: '薛薛', no: '101', score: '96' },  
                { id: 5, subject: '数学', teacherName: '张老师', studentName: '谦谦', no: '101', score: '99' },  
                { id: 6, subject: '英语', teacherName: '李老师', studentName: '朱朱', no: '102', score: '82' },  
                { id: 7, subject: '英语', teacherName: '李老师', studentName: '几木', no: '102', score: '84' },  
                { id: 8, subject: '英语', teacherName: '王老师', studentName: '若清', no: '102', score: '89' },  
                { id: 9, subject: '英语', teacherName: '郑老师', studentName: '吱吱', no: '102', score: '85' },  
                { id: 10, subject: '英语', teacherName: '李老师', studentName: '旺仔', no: '102', score: '97' },  
            ],  
            filteredCourses: [],  
            showTable: false,  
        };  
    },  
    methods: {  
        searchCourses() {  
            const query = this.searchQuery.trim().toLowerCase();  
            this.filteredCourses = this.allCourses.filter(course =>  
                course.studentName.toLowerCase().includes(query)  
            );  
            this.showTable = this.filteredCourses.length > 0;  
            if (!this.showTable) {  
                alert('查询不到');  
            }  
        },  
        increaseScore(course) {  
            const newScore = parseInt(course.score, 10) + 1;  
            this.$set(this.filteredCourses, this.filteredCourses.findIndex(c => c.id === course.id), {  
                ...course,  
                score: newScore.toString()  
            });  
            // 同步更新 allCourses 中的成绩（如果需要的话）  
            const allCourseIndex = this.allCourses.findIndex(c => c.id === course.id);  
            if (allCourseIndex !== -1) {  
                this.$set(this.allCourses, allCourseIndex, {  
                    ...this.allCourses[allCourseIndex],  
                    score: newScore.toString()  
                });  
            }  
        },  
        decreaseScore(course) {  
            const newScore = Math.max(0, parseInt(course.score, 10) - 1); // 防止成绩变成负数  
            this.$set(this.filteredCourses, this.filteredCourses.findIndex(c => c.id === course.id), {  
                ...course,  
                score: newScore.toString()  
            });  
            // 同步更新 allCourses 中的成绩（如果需要的话）  
            const allCourseIndex = this.allCourses.findIndex(c => c.id === course.id);  
            if (allCourseIndex !== -1) {  
                this.$set(this.allCourses, allCourseIndex, {  
                    ...this.allCourses[allCourseIndex],  
                    score: newScore.toString()  
                });  
            }  
        }  
    }  
};  
</script>  
  
<style scoped>  
.teacher-search {  
    max-width: 600px;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 8px;  
}  
  
.search-bar {  
    margin-bottom: 20px;  
    display: flex;  
    align-items: center;  
}  
  
.search-bar input {  
    width: calc(100% - 100px);  
    padding: 10px;  
    box-sizing: border-box;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
}  
  
.search-bar button {  
    padding: 10px 20px;  
    margin-left: 10px;  
    border: none;  
    background-color: #0f3b6b;  
    color: white;  
    border-radius: 4px;  
    cursor: pointer;  
}  
  
.search-bar button:hover {  
    background-color: #0056b3;  
}  
  
table {  
    width: 100%;  
    border-collapse: collapse;  
    margin-top: 20px;  
}  
  
th,  
td {  
    padding: 10px;  
    border: 1px solid #ddd;  
    text-align: left;  
}  
  
th {  
    background-color: #f4f4f4;  
}  
  
td button {  
    margin: 0 5px;  
    cursor: pointer;  
}  
</style>